import{d as f,e as u,c as b,a,P as z,Q as h,$ as e,X as l,a4 as t,U as v,a2 as k,a5 as S}from"./elementPlusModules.js";import{_ as x}from"./index.js";import"./lodashModules.js";import"./vxeTableModules.js";const V=f({__name:"Vertical",setup(P){const o=u(""),m=u(`
<template>
  <el-radio-group v-model="size">
    <el-radio label="large">Large</el-radio>
    <el-radio>Default</el-radio>
    <el-radio label="small">Small</el-radio>
  </el-radio-group>

  <el-descriptions
    title="Vertical list with border"
    direction="vertical"
    :column="4"
    :size="size"
    border
  >
    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
    <el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
    <el-descriptions-item label="Remarks">
      <el-tag size="small">School</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="Address"
      >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions
    title="Vertical list without border"
    :column="4"
    :size="size"
    direction="vertical"
    :style="blockMargin"
  >
    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
    <el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>
    <el-descriptions-item label="Remarks">
      <el-tag size="small">School</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="Address"
      >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

const size = ref('')
const blockMargin = computed(() => {
  const marginMap = {
    large: '32px',
    default: '28px',
    small: '24px',
  }
  return {
    marginTop: marginMap[size.value] || marginMap.default,
  }
})
<\/script>

<style scoped>
.el-descriptions {
  margin-top: 20px;
}
</style>
`),p=b(()=>{const s={large:"32px",default:"28px",small:"24px"};return{marginTop:s[o.value]||s.default}});return(s,n)=>{const r=a("el-radio"),_=a("el-radio-group"),i=a("el-descriptions-item"),d=a("el-tag"),c=a("el-descriptions");return z(),h(S,null,[e(_,{modelValue:o.value,"onUpdate:modelValue":n[0]||(n[0]=g=>o.value=g)},{default:l(()=>[e(r,{label:"large"},{default:l(()=>[t("Large")]),_:1}),e(r,null,{default:l(()=>[t("Default")]),_:1}),e(r,{label:"small"},{default:l(()=>[t("Small")]),_:1})]),_:1},8,["modelValue"]),e(c,{title:"Vertical list with border",direction:"vertical",column:4,size:o.value,border:""},{default:l(()=>[e(i,{label:"Username"},{default:l(()=>[t("kooriookami")]),_:1}),e(i,{label:"Telephone"},{default:l(()=>[t("18100000000")]),_:1}),e(i,{label:"Place",span:2},{default:l(()=>[t("Suzhou")]),_:1}),e(i,{label:"Remarks"},{default:l(()=>[e(d,{size:"small"},{default:l(()=>[t("School")]),_:1})]),_:1}),e(i,{label:"Address"},{default:l(()=>[t("No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province ")]),_:1})]),_:1},8,["size"]),e(c,{title:"Vertical list without border",column:4,size:o.value,direction:"vertical",style:v(p.value)},{default:l(()=>[e(i,{label:"Username"},{default:l(()=>[t("kooriookami")]),_:1}),e(i,{label:"Telephone"},{default:l(()=>[t("18100000000")]),_:1}),e(i,{label:"Place",span:2},{default:l(()=>[t("Suzhou")]),_:1}),e(i,{label:"Remarks"},{default:l(()=>[e(d,{size:"small"},{default:l(()=>[t("School")]),_:1})]),_:1}),e(i,{label:"Address"},{default:l(()=>[t("No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province ")]),_:1})]),_:1},8,["size","style"]),k(s.$slots,"default",{html:m.value},void 0,!0)],64)}}}),y=x(V,[["__scopeId","data-v-62d1d351"]]);export{y as default};
